---
title: <ProvidersCard />
---

The `<ProvidersCard />` component provides a simple interface for managing linked social providers. It allows users to link or unlink third-party social accounts with a clean, customizable UI out of the box.

**Note:** You must configure the `providers` option in your [`AuthUIProvider`](../components/auth-ui-provider) context to use this component.

<img alt="Providers Card" src="/screenshots/providers-card-dark.png" className="rounded-xl hidden dark:block w-lg mt-0 mb-0" />
<img alt="Providers Card" src="/screenshots/providers-card-light.png" className="rounded-xl dark:hidden w-lg mt-0 mb-0" />

## Usage

Here's how you can include `<ProvidersCard />` on your user settings or account management page:

```tsx
import { ProvidersCard } from "@daveyplate/better-auth-ui"

export default function SettingsPage() {
    return (
        <div className="flex flex-col gap-6">
            <ProvidersCard />
        </div>
    )
}
```

This component seamlessly pulls in settings from your [`AuthUIProvider`](../components/auth-ui-provider) context, automatically handling provider link and unlink workflows.

## Reference

You can use the following props to further customize `<ProvidersCard />`:

<AutoTypeTable path="../src/components/settings/providers/providers-card.tsx" name="ProvidersCardProps" />

## Styling

Customize the styling of your `<ProvidersCard />` through the `classNames` prop:

```tsx
<ProvidersCard
    classNames={{
        base: "border-primary shadow",
        header: "bg-primary-foreground",
        title: "text-xl font-semibold text-primary",
        description: "text-muted-foreground",
        content: "bg-background",
        footer: "bg-muted",
        button: "bg-primary hover:bg-primary-foreground text-white"
    }}
/>
```

## Localization

Adjust displayed texts via the `localization` prop to fit your application's localization:

```tsx
<ProvidersCard
    localization={{
        PROVIDERS: "Social Accounts",
        PROVIDERS_DESCRIPTION: "Link or unlink your third-party social accounts.",
        LINK: "Link Account",
        UNLINK: "Unlink",
    }}
/>
```

## Usage in Settings Page

You usually integrate the `<ProvidersCard />` with other settings components. Here's a typical example configuration:

```tsx title="app/dashboard/settings/page.tsx"
import {
    ProvidersCard,  
    ChangeEmailCard,
    SettingsCards,
} from "@daveyplate/better-auth-ui";

export default function SettingsPage() {
    return (
        <div className="flex flex-col gap-6 mx-auto max-w-xl">
            <UpdateAvatarCard />
            <UpdateUsernameCard />
            <ChangeEmailCard />
            <ChangePasswordCard />
            <ProvidersCard />
            <SessionsCard />
            <DeleteAccountCard />
        </div>
    )
}
```

This complete implementation shows how you can use `<ProvidersCard />` along with other available settings cards to build a comprehensive, managed user settings experience quickly.